<template>
  <PageLayout>
    <!-- <template #header>
      <BasicForm :options="queryOptions" @ok="onQueryDataByParams"></BasicForm>
    </template> -->
    <div class="table-box">
      <div class="head-box">
        <div class="title">隐私政策文件更新</div>
        <!-- <a-space :size="16">
          <a-button type="primary" @click="edit()">新建</a-button>
          <a-button type="primary" @click="importFile">导入</a-button>
        </a-space> -->
      </div>
      <div class="bg-fff">
        <!-- :apiFetch="postPrivacyPage"  -->
        <BasicTable ref="tableRef" :columns="columns" :query-params="queryData" :apiFetch="postPrivacyPage"  
>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'fileUrl'">
              <div v-if="currentMsg.id == record.id">
                <a-input v-model:value="currentMsg.fileUrl" placeholder="请输入链接" :maxlength="300" />
              </div>
              <div v-else>{{record.fileUrl}}</div>
            </template>
            <template v-if="column.key === 'action'">
              <a-space class="space-btn--box" :size="10">
                <a class="btn" v-if="currentMsg.id == record.id" @click="editUrl(record,'save')">保存</a>
                <a class="btn" v-else @click="editUrl(record,'edit')">编辑</a>
              </a-space>
            </template>
          </template>
        </BasicTable>
      </div>
    </div>
    <UploadInputFile id="file" ref="uploadInputFileRef" @change="changeFile" />
  </PageLayout>
</template>

<script name="privacypolicy-list" setup>
import {
  postPrivacyPage,
  postPrivacyUpdate,
  postClientUserExport,
  postClientUserUpdateStatus,
} from "@/api/common";
import { useStoreCommonEnum } from "@/store";
import { comfirmModal } from "@/hooks/useModal";
import { languageObj } from "@/views/constant";
import { message } from "ant-design-vue";
const storeCommonEnum = useStoreCommonEnum();
const router = useRouter();
const dataSource = ref(
  Array.from({ length: 11 }, () => ({
    username: "2121",
  }))
);
const queryOptions = ref([
  {
    name: "产品型号",
    type: "select",
    value: undefined,
    placeholder: "请输入",
    filed: "list",
    async: async (data) => {
      const getRole = () => {
        return new Promise((resolve) => {
          let list = Array.from({ length: 3 }, (item, index) => ({
            label: "角色1",
            value: index,
          }));
          resolve(list);
        });
      };
      data.list = await getRole();
    },
  },
  {
    name: "CODE",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "nickname",
  },

  {
    name: "更新时间",
    type: "range-picker",
    value: [],
    placeholder: "请选择",
    filed: "rangeDate",
    dateFields: ["startCreateTime", "endCreateTime"],
  },
]);
const columns = [
  {
    title: "语言",
    dataIndex: "lang",
    key: "lang",
    width: "150px",
    ellipsis: true,
    customRender: ({ record }) => {
      return languageObj[record.lang];
    },
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
    key: "updateTime",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "文件名称",
    dataIndex: "fileUrl",
    key: "fileUrl",
    width: "200px",
    ellipsis: true,
  },

  {
    title: "操作",
    fixed: "right",
    dataIndex: "action",
    key: "action",
    width: 200,
  },
];

const queryData = reactive({});
const tableRef = ref(null);
const onQueryDataByParams = (params) => {
  for (let key in params) {
    queryData[key] = params[key];
  }
  tableRef.value.refreshTableData();
};

const toDetail = (record) => {
  router.push({
    path: "/feedback/detail",
    query: {
      id: record?.id,
    },
  });
};
const uploadInputFileRef = ref(null);
const currentMsg = ref({});
const uploadFile = (record) => {
  currentMsg.value = { ...record };
  uploadInputFileRef.value.addFile();
};
const changeFile = (data) => {
  console.log("data", data);
  postPrivacyUpdate({
    id: currentMsg.value.id,
    fileName: data.fileName,
    fileUrl: data.fileUrl,
    fileLength: data.fileLength,
  }).then((res) => {
    message.success("上传成功");
    tableRef.value.fetch();
  });
};

const editUrl = (record, type) => {
  if (type == 'edit') {
    currentMsg.value = { ...record }
  } else {
    postPrivacyUpdate(currentMsg.value).then(res => {
      message.success('修改成功')
      currentMsg.value = {}
      tableRef.value.fetch();
    })
  }
}
const edit = (record) => {
  router.push({
    path: "/productdatabase/edit",
    query: {
      id: record?.id,
    },
  });
};

const changeStatus = (record) => {
  const title = `${record.status ? "启用" : "停用"}`;
  comfirmModal({
    content: `确认${title}该用户账号吗？`,
    onOk() {
      postClientUserUpdateStatus({
        id: record.id,
        status: !record.status,
      }).then(() => {
        message.success(`${title}成功`);
        tableRef.value.fetch();
      });
    },
  });
};
const remove = (id) => {
  comfirmModal({
    content: "确认删除该产品信息吗？",
    onOk() {
      postUserDelete({ id }).then(() => {
        message.success("删除成功");
        tableRef.value.fetch();
      });
    },
  });
};
const add = () => { };
const importFile = () => {
  if (!tableRef.value.data?.length) {
    message.error("暂无数据");
    return;
  }
  const params = {};

  for (let key in queryData) {
    params[key] = queryData[key];
  }
  postClientUserExport(params).then((res) => {
    message.success("导出成功");
  });
};
</script>

<style lang="less" scoped></style>
